<template>
    <!-- 滚动区域开始 -->
    <view class="container">
        <z-paging
            ref="paging"
            @scroll="handleScroll"
            :scroll-with-animation="true"
        >
            <!-- 骨架屏区域开始 -->
            <uv-skeletons :loading="isSkeleton" :skeleton="skeletons"></uv-skeletons>
            <!-- 骨架屏区域结束 -->

            <!-- 搜索区域开始 -->
            <template #top>
                <view @click="goto('/pagesFriend/search/index')">
                    <uni-search-bar
                        placeholder="搜索好友"
                        readonly
                        cancelButton="none"
                        bgColor="#fff"
                    />
                </view>
            </template>
            <!-- 搜索区域结束 -->

            <uni-swipe-action>
                <uni-swipe-action-item v-for="(item, index) in newFriendList" :key="index">
                    <uni-list-chat
                        :title="item.applicant_info.username"
                        :avatar-list="[{url: item.applicant_info.avatar_url ? global.FILE_DOMAIN + item.applicant_info.avatar_url : '/static/images/default_avatar.png'}]"
                        :note="item.apply"
                        badge-positon="left"
                    >
                        <view class="chat-custom-right">
                            <view class="chat-custom-btn">
                                <view v-if="item.process_state == 0">
                                    <text class="btn" @click="handleAgree(item.id)">同意</text>
                                    <text class="btn" @click="handleReject(item.id)">拒绝</text>
                                </view>
                                <view v-else-if="item.process_state == 1">
                                    <uni-tag :mark="true" text="已同意" type="success" size="small" />
                                </view>
                                <view v-else>
                                    <uni-tag :mark="true" text="已拒绝" size="small" />
                                </view>
                            </view>
                        </view>
                
                    </uni-list-chat>
                    <!-- 右侧删除按钮 -->
                    <template #right>
                        <view class="swipe-right">
                            <button @click="handleDelete(item.id)" class="button delete-button">删除</button>
                        </view>
                    </template>
                </uni-swipe-action-item>
            </uni-swipe-action>

        </z-paging>
    </view>
    <!-- 滚动区域结束 -->

    <!-- 返回顶部 -->
    <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
</template>

<script setup lang="ts">
import { reqAgreeFriendApplyAPI, reqDeleteFriendApplyAPI, reqEditFriendApplyAPI, reqFriendApplyListAPI } from '@/apis/friendApply'
import { useCommonStore, useUserStore } from '@/stores'
import type { FriendApply, FriendApplyListParams } from '@/types/friendApply'
import { onShow } from '@dcloudio/uni-app'
import { inject, reactive, ref } from 'vue'
import { goto } from '@/utils/tools'

// --------------- 定义全局变量开始 ---------------
const paging = ref()

// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

// 公共存储
const commonStore = useCommonStore()

// 新好友列表
const newFriendList = ref<FriendApply[]>([])
// --------------- 定义全局变量结束 ---------------



onShow(async () => {
    for (let index = 0; index < 12; index++) {
        skeletons.push(skeleton as never)
    }

    isSkeleton.value = true

    await getFriendApply()

    isSkeleton.value = false
})



// --------------- 申请列表功能开始 ---------------
// 申请列表参数
const params = ref<FriendApplyListParams>({
    respondent_id: userStore.profile.user?.uid,
    status: "1",
    page: 1
})
// 获取好友申请
const getFriendApply = async () => {
    const result = await reqFriendApplyListAPI(params.value)
    newFriendList.value = result.data.friend_applies
}
// --------------- 申请列表功能结束 ---------------



// --------------- 处理同意申请开始 ---------------
const handleAgree = async (id: number) => {
    await reqAgreeFriendApplyAPI(id, 'ws')
    const friendApply = newFriendList.value.find((item: FriendApply) => item.id == id)
    friendApply.process_state = 1
    uni.showToast({
        title: '同意申请成功',
        duration: 1000
    })

    // 更新好友申请数量
    if (commonStore.friendApplyTotal > 0) {
        const total = commonStore.friendApplyTotal - 1
        commonStore.setFriendApplyTotal(total)
    }
}
// --------------- 处理同意申请结束 ---------------



// --------------- 处理拒绝申请开始 ---------------
const handleReject = (id: number) => {
    uni.showModal({
        content: '确定要拒绝好友申请吗?',
        confirmColor: global.THEME_COLOR,
        success: async (res) => {
            if (res.confirm) {
                await reqEditFriendApplyAPI({id, process_state: -1})
                const friendApply = newFriendList.value.find((item: FriendApply) => item.id == id)
                friendApply.process_state = -1

                uni.showToast({
                    title: '拒绝申请成功',
                    duration: 1000
                })

                // 更新好友申请数量
                if (commonStore.friendApplyTotal > 0) {
                    const total = commonStore.friendApplyTotal - 1
                    commonStore.setFriendApplyTotal(total)
                }
            }
        }
	})
}
// --------------- 处理拒绝申请结束 ---------------



// --------------- 处理删除申请开始 ---------------
const handleDelete = async (id: number) => {
    uni.showModal({
        content: '确定要删除好友申请吗?',
        confirmColor: global.THEME_COLOR,
        success: async (res) => {
            if (res.confirm) {
                await reqDeleteFriendApplyAPI(id +'')
                const index = newFriendList.value.findIndex((item: FriendApply) => item.id == id)
                newFriendList.value.splice(index, 1)
                uni.showToast({
                    title: '删除申请成功',
                    duration: 1000
                })
            }
        }
	})
}
// --------------- 处理删除申请结束 ---------------



// --------------- 返回顶部功能开始 ---------------
// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
  paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
  isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// --------------- 返回顶部功能结束 ---------------



// --------------- 定义骨架变量开始 ---------------
// 定义是否显示骨架
const isSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive({
  type: 'flex',
  num: 1,
  style: 'padding: 15rpx 30rpx 15rpx 25rpx;background-color: #fff;border-bottom: 2rpx solid #f6f6f6;justify-content: space-between;',
  children: [
    // 图片区域
    {
      type: 'custom',
      num: 1,
      style: 'width: 85rpx;height: 85rpx;border-radius: 10rpx;margin-right: -60rpx;'
    },

    // 文本区域
    {
      type: 'custom',
      num: 2,
      style: ['width: 120rpx;height: 40rpx;', 'width: 400rpx;height: 30rpx;']
    },

    // 标识区域
    {
      type: 'custom',
      num: 1,
      style: ['width: 90rpx;height: 40rpx;margin-left: 40rpx;']
    },
  ]
})
const skeletons = reactive([])
// --------------- 定义骨架变量结束 ---------------
</script>

<style scoped lang="scss">
.container {
  .chat-custom-right {
    display: flex;
    flex-direction: column;
    .chat-custom-btn {
      display: flex;
      justify-content: flex-end;
      .btn {
        padding: 5rpx 10rpx;
        background-color: $uni-color-primary;
        border-radius: 4rpx;
        color: #fff;
        font-size: 24rpx;
        &:last-child {
            margin-left: 20rpx;
            background-color: #df1212;
        }
      }
    }
    .chat-custom-text {
      font-size: 24rpx;
      color: #c7c7c7;
    }
  }
  .swipe-right {
    display: flex;
      height: 94%;

      .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        padding: 6px;
        line-height: 1.5;
        color: #fff;
        font-size: 26rpx;
        border-radius: 0;
      }

      .delete-button {
        background-color: #df1212;
      }
  }
}
</style>